"use client";
import React, { useState, useRef, useEffect } from "react";
import {
  Button,
  Card,
  Form,
  Input,
  message,
  Rate,
  Select,
  Spin,
  Switch,
  TimePicker,
  Upload,
  DatePicker,
  Tooltip,
  Tag,
} from "antd";
import { LoadingOutlined, PictureOutlined, SmileOutlined, TagOutlined, UserAddOutlined } from "@ant-design/icons";
import { addMoodPost } from "@/api/moodPostController";
import dayjs from "dayjs";
import Picker from '@emoji-mart/react'
import data from '@emoji-mart/data'
import zh from '@emoji-mart/data/i18n/zh.json'
import "./index.css";
import { useRouter } from 'next/navigation';

const { TextArea } = Input;
const { Option } = Select;

const isWorkOptions = [
  { label: "上班", value: 0 },
  { label: "学习", value: 1 },
  { label: "休息", value: 2 },
];

// 心情状态选项
const moodStateOptions = [
  { label: "开心", value: 0 }, { label: "兴奋", value: 1 }, { label: "平静", value: 2 },
  { label: "轻松", value: 3 }, { label: "满足", value: 4 }, { label: "无聊", value: 5 },
  { label: "困倦", value: 6 }, { label: "气炸", value: 7 }, { label: "暴怒", value: 8 },
  { label: "难过", value: 9 }, { label: "沮丧", value: 10 }, { label: "郁闷", value: 11 },
  { label: "焦虑", value: 12 }, { label: "烦躁", value: 13 }, { label: "疲惫", value: 14 },
  { label: "失落", value: 15 }, { label: "无助", value: 16 }, { label: "委屈", value: 17 },
  { label: "烦恼", value: 18 }, { label: "崩溃", value: 19 },
];

// 补充：忙碌程度颜色数组
const busyColors = ['#e5e6eb', '#a0cfff', '#1677ff', '#faad14', '#ff4d4f'];

function BusyLevelSelector({ value = 3, onChange }: { value?: number, onChange?: (v: number) => void }) {
  return (
    <div style={{ display: 'flex', gap: 6, alignItems: 'center', minHeight: 24 }}>
      {busyColors.map((color, idx) => (
        <div
          key={color}
          onClick={() => onChange?.(idx + 1)}
          style={{
            width: value === idx + 1 ? 21 : 20,
            height: value === idx + 1 ? 21 : 20,
            borderRadius: 4,
            background: color,
            border: value === idx + 1 ? `2px solid ${color}` : '2px solid #e5e6eb',
            cursor: 'pointer',
            transition: 'border 0.2s',
            boxSizing: 'border-box',
          }}
        />
      ))}
    </div>
  );
}

export default function Index({ onSuccess }: { onSuccess?: () => void }) {
  const router = useRouter();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
  const [imagePreviewUrls, setImagePreviewUrls] = useState<string[]>([]);
  const [isFocused, setIsFocused] = useState(false);
  const [showEmoji, setShowEmoji] = useState(false);
  const [content, setContent] = useState("");
  const textareaRef = useRef<any>(null);
  const emojiBtnRef = useRef<HTMLSpanElement>(null);
  const emojiPickerRef = useRef<HTMLDivElement>(null);
  const inputBoxRef = useRef<HTMLDivElement>(null);
  const [selectedEarlyTime, setSelectedEarlyTime] = useState<dayjs.Dayjs | null>(null);
  const [selectedEveningTime, setSelectedEveningTime] = useState<dayjs.Dayjs | null>(null);
  const [selectedIsWork, setSelectedIsWork] = useState<number | undefined>(undefined);
  const [selectedMoodState, setSelectedMoodState] = useState<number | undefined>(undefined);
  const [earlyTimePickerOpen, setEarlyTimePickerOpen] = useState(false);
  const [eveningTimePickerOpen, setEveningTimePickerOpen] = useState(false);
  const [isWorkPickerOpen, setIsWorkPickerOpen] = useState(false);
  const [moodStatePickerOpen, setMoodStatePickerOpen] = useState(false);
  const [showTopicSelector, setShowTopicSelector] = useState(false);
  const [selectedTopic, setSelectedTopic] = useState<string | null>(null);
  const topicRef = useRef<HTMLDivElement>(null);
  const [showTimePicker, setShowTimePicker] = useState(false);
  const [showEveningTimePicker, setShowEveningTimePicker] = useState(false);
  const [showMoodSelector, setShowMoodSelector] = useState(false);
  const [showWorkSelector, setShowWorkSelector] = useState(false);
  const timePickerRef = useRef<HTMLDivElement>(null);
  const eveningTimePickerRef = useRef<HTMLDivElement>(null);
  const moodSelectorRef = useRef<HTMLDivElement>(null);
  const workSelectorRef = useRef<HTMLDivElement>(null);

  // Refs for buttons and pickers to handle outside clicks
  const isWorkButtonRef = useRef<HTMLButtonElement>(null);
  const isWorkPickerRef = useRef<HTMLDivElement>(null);
  const moodStateButtonRef = useRef<HTMLButtonElement>(null);
  const moodStatePickerRef = useRef<HTMLDivElement>(null);

  // 点击输入框外部自动还原高度
  useEffect(() => {
    if (!isFocused) return;
    const handleClick = (e: MouseEvent) => {
      const box = inputBoxRef.current;
      if (box && box.contains(e.target as Node)) return;
      // 只有输入框无内容时才自动还原
      if (!content.trim()) {
        setIsFocused(false);
      }
    };
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, [isFocused, content]);

  // 点击表情区外自动关闭
  useEffect(() => {
    if (!showEmoji) return;
    const handleClick = (e: MouseEvent) => {
      const btn = emojiBtnRef.current;
      const picker = emojiPickerRef.current;
      if (btn && btn.contains(e.target as Node)) return;
      if (picker && picker.contains(e.target as Node)) return;
      setShowEmoji(false);
    };
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, [showEmoji]);

  // 点击工作状态选择器外部自动关闭
  useEffect(() => {
    if (!isWorkPickerOpen) return;
    const handleClick = (e: MouseEvent) => {
      if (isWorkButtonRef.current && isWorkButtonRef.current.contains(e.target as Node)) {
        if (!isWorkPickerOpen) setIsWorkPickerOpen(true);
        return;
      }
      if (isWorkPickerRef.current && isWorkPickerRef.current.contains(e.target as Node)) return;
      setIsWorkPickerOpen(false);
    };
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, [isWorkPickerOpen]);

  // 点击心情状态选择器外部自动关闭
  useEffect(() => {
    if (!moodStatePickerOpen) return;
    const handleClick = (e: MouseEvent) => {
      if (moodStateButtonRef.current && moodStateButtonRef.current.contains(e.target as Node)) {
        if (!moodStatePickerOpen) setMoodStatePickerOpen(true);
        return;
      }
      if (moodStatePickerRef.current && moodStatePickerRef.current.contains(e.target as Node)) return;
      setMoodStatePickerOpen(false);
    };
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, [moodStatePickerOpen]);

  // 点击话题选择器外部自动关闭
  useEffect(() => {
    if (!showTopicSelector) return;
    const handleClick = (e: MouseEvent) => {
      if (topicRef.current && !topicRef.current.contains(e.target as Node)) {
        setShowTopicSelector(false);
      }
    };
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, [showTopicSelector]);

  // 点击时间选择器外部自动关闭
  useEffect(() => {
    if (!showTimePicker) return;
    const handleClick = (e: MouseEvent) => {
      if (timePickerRef.current && !timePickerRef.current.contains(e.target as Node)) {
        setShowTimePicker(false);
      }
    };
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, [showTimePicker]);

  // 点击晚休时间选择器外部自动关闭
  useEffect(() => {
    if (!showEveningTimePicker) return;
    const handleClick = (e: MouseEvent) => {
      if (eveningTimePickerRef.current && !eveningTimePickerRef.current.contains(e.target as Node)) {
        setShowEveningTimePicker(false);
      }
    };
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, [showEveningTimePicker]);

  // 点击心情选择器外部自动关闭
  useEffect(() => {
    if (!showMoodSelector) return;
    const handleClick = (e: MouseEvent) => {
      if (moodSelectorRef.current && !moodSelectorRef.current.contains(e.target as Node)) {
        setShowMoodSelector(false);
      }
    };
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, [showMoodSelector]);

  // 点击工作状态选择器外部自动关闭
  useEffect(() => {
    if (!showWorkSelector) return;
    const handleClick = (e: MouseEvent) => {
      if (workSelectorRef.current && !workSelectorRef.current.contains(e.target as Node)) {
        setShowWorkSelector(false);
      }
    };
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, [showWorkSelector]);

  const handleEmojiSelect = (emoji: any) => {
    const textarea = textareaRef.current?.resizableTextArea?.textArea;
    if (textarea) {
      const start = textarea.selectionStart;
      const end = textarea.selectionEnd;
      const newValue = content.slice(0, start) + emoji.native + content.slice(end);
      setContent(newValue);
      form.setFieldsValue({ content: newValue });
      setShowEmoji(false);
      setTimeout(() => {
        textarea.focus();
        textarea.setSelectionRange(start + emoji.native.length, start + emoji.native.length);
      }, 0);
    }
  };

  // 处理图片上传
  const handleImageUpload = (file: File, fileList: File[]) => {
    let newFiles = [...selectedFiles];
    let newUrls = [...imagePreviewUrls];
    for (let f of fileList) {
      if (newFiles.length >= 9) break;
      if (!newFiles.some(existing => existing.name === f.name && existing.size === f.size)) {
        newFiles.push(f);
        newUrls.push(URL.createObjectURL(f));
      }
    }
    setSelectedFiles(newFiles);
    setImagePreviewUrls(newUrls);
    message.success('图片已选择');
    return false; // 阻止默认上传行为
  };

  const handleRemoveImage = (idx: number) => {
    setSelectedFiles(prev => {
      const newFiles = [...prev];
      newFiles.splice(idx, 1);
      return newFiles;
    });
    setImagePreviewUrls(prev => {
      const newUrls = [...prev];
      URL.revokeObjectURL(newUrls[idx]);
      newUrls.splice(idx, 1);
      return newUrls;
    });
  };

  // 发布时将所有图片文件名用分号拼接传递给 photoName 字段
  const handleSubmit = async (values: any) => {
    setLoading(true);
    try {
      const params = {
        ...values,
        content,
        earlyTime: selectedEarlyTime ? dayjs(selectedEarlyTime).toISOString() : "",
        eveningTime: selectedEveningTime ? dayjs(selectedEveningTime).toISOString() : "",
        moodState: values.moodState,
        isPublic: values.isPublic ? 1 : 0,
        photoName: selectedFiles.map(f => f.name).join(';'),
      };
      if (selectedIsWork !== undefined) params.isWork = selectedIsWork;
      if (selectedMoodState !== undefined) params.moodState = selectedMoodState;
      if (selectedTopic) params.topic = selectedTopic;

      const res = await addMoodPost(params, selectedFiles);
      // @ts-ignore
      if (res.code === 0) {
        message.success("发布成功");
        form.resetFields();
        setContent("");
        setSelectedFiles([]);
        setImagePreviewUrls([]);
        setSelectedEarlyTime(null);
        setSelectedEveningTime(null);
        setSelectedIsWork(undefined);
        setSelectedMoodState(undefined);
        setSelectedTopic(null);
        form.setFieldsValue({
          earlyTime: null,
          eveningTime: null,
          isWork: undefined,
          moodState: undefined,
          topic: null,
        });
        onSuccess?.();
        router.refresh();
      } else {
        message.error(res?.data?.message || "发布失败");
      }
    } catch (e: any) {
      message.error(e?.response?.data?.message || e?.message || "发布失败");
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card 
      style={{ 
        marginBottom: 12, 
        padding: 0,
        borderRadius: 8,
        boxShadow: '0 1px 2px rgba(0,0,0,0.03)'
      }}
      bodyStyle={{
        padding: '16px'
      }}
    >
      <Form
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
        initialValues={{ isPublic: 1, isWork: 0, workLoad: 1, moodScore: 3, moodState: 0 }}
      >
        {/* 选择圈子提示 */}
        <div style={{ marginBottom: 12, display: 'flex', alignItems: 'center' }}>
  
          <div style={{ flex: 1 }}></div>
          <div style={{ fontSize: 13, color: '#999' }}>
            {content.length}/1000
          </div>
        </div>

        <Form.Item
          name="content"
          label={null}
          rules={[{ required: true, message: "" }]}
          style={{ marginBottom: 12 }}
        >
          <div ref={inputBoxRef} style={{ position: 'relative' }}>
            <TextArea
              ref={textareaRef}
              value={content}
              onChange={e => {
                setContent(e.target.value);
                form.setFieldsValue({ content: e.target.value });
              }}
              placeholder="快和朋友一起分享今日新鲜事吧~"
              maxLength={1000}
              showCount={false}
              autoSize={{ minRows: 3, maxRows: 8 }}
              style={{
                width: '100%',
                border: 'none',
                outline: 'none',
                color: '#222',
                fontWeight: 400,
                resize: 'none',
                background: 'transparent',
                boxSizing: 'border-box',
                lineHeight: 1.6,
                fontSize: 15,
                padding: '0',
                boxShadow: 'none',
                borderRadius: 0,
                overflowY: 'auto',
              }}
              onFocus={() => setIsFocused(true)}
              onBlur={() => {
                if (!content.trim()) {
                  setIsFocused(false);
                }
              }}
            />
          </div>
        </Form.Item>

        {/* 显示已选择的图片缩略图九宫格 */}
        {(imagePreviewUrls.length > 0) && (
          <div style={{ 
            marginBottom: 12, 
            display: 'flex',
            gap: 12,
            flexWrap: 'wrap',
            alignItems: 'center',
          }}>
            {imagePreviewUrls.map((url, idx) => (
              <div key={idx} style={{ position: 'relative', width: 80, height: 80 }}>
                <img
                  src={url}
                  alt="预览"
                  style={{
                    width: 80,
                    height: 80,
                    objectFit: 'cover',
                    borderRadius: 4,
                    border: '1px solid #eee',
                  }}
                />
                <span
                  onClick={() => handleRemoveImage(idx)}
                  style={{
                    position: 'absolute',
                    top: 2,
                    right: 2,
                    cursor: 'pointer',
                    background: 'rgba(0,0,0,0.5)',
                    borderRadius: '50%',
                    color: '#fff',
                    width: 20,
                    height: 20,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontSize: 16,
                    zIndex: 2,
                  }}
                >×</span>
              </div>
            ))}
            {selectedFiles.length < 9 && (
              <Upload
                showUploadList={false}
                beforeUpload={handleImageUpload}
                accept="image/*"
                multiple
              >
                <div style={{
                  width: 80,
                  height: 80,
                  border: '1px dashed #ccc',
                  borderRadius: 4,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  cursor: 'pointer',
                  fontSize: 32,
                  color: '#aaa',
                }}>+</div>
              </Upload>
            )}
          </div>
        )}

        {/* 标签区域：话题、时间、心情等 */}
        <div style={{ marginBottom: 12, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {/* 已选话题标签 */}
          {selectedTopic && (
            <Tag 
              color="blue" 
              closable 
              onClose={() => setSelectedTopic(null)}
              style={{ padding: '4px 8px', fontSize: 14 }}
            >
              #{selectedTopic}
            </Tag>
          )}
          
          {/* 起床时间标签 */}
          {selectedEarlyTime && (
            <Tag 
              color="cyan" 
              closable 
              onClose={() => {
                setSelectedEarlyTime(null);
                form.setFieldsValue({ earlyTime: null });
              }}
              style={{ padding: '4px 8px', fontSize: 14 }}
            >
              #{dayjs(selectedEarlyTime).format('HH:mm')}起床
            </Tag>
          )}
          
          {/* 晚休时间标签 */}
          {selectedEveningTime && (
            <Tag 
              color="purple" 
              closable 
              onClose={() => {
                setSelectedEveningTime(null);
                form.setFieldsValue({ eveningTime: null });
              }}
              style={{ padding: '4px 8px', fontSize: 14 }}
            >
              #{dayjs(selectedEveningTime).format('HH:mm')}晚休
            </Tag>
          )}
          
          {/* 工作状态标签 */}
          {selectedIsWork !== undefined && (
            <Tag 
              color="green" 
              closable 
              onClose={() => {
                setSelectedIsWork(undefined);
                form.setFieldsValue({ isWork: undefined });
              }}
              style={{ padding: '4px 8px', fontSize: 14 }}
            >
              #{isWorkOptions.find(opt => opt.value === selectedIsWork)?.label}
            </Tag>
          )}
          
          {/* 心情状态标签 */}
          {selectedMoodState !== undefined && (
            <Tag 
              color="orange" 
              closable 
              onClose={() => {
                setSelectedMoodState(undefined);
                form.setFieldsValue({ moodState: undefined });
              }}
              style={{ padding: '4px 8px', fontSize: 14 }}
            >
              #{moodStateOptions.find(opt => opt.value === selectedMoodState)?.label}
            </Tag>
          )}
        </div>

        {/* 底部工具栏 */}
        <div style={{ 
          display: 'flex', 
          justifyContent: 'space-between', 
          alignItems: 'center',
          borderTop: '1px solid #f0f0f0',
          paddingTop: 12,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            {/* 表情按钮 */}
            <Tooltip title="表情">
              <span
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  cursor: 'pointer',
                  color: showEmoji ? '#1677FF' : '#666',
                  fontSize: 20,
                }}
                onClick={() => setShowEmoji(v => !v)}
                ref={emojiBtnRef}
              >
                <SmileOutlined />
              </span>
            </Tooltip>

            {/* 图片按钮 */}
            <Tooltip title="图片">
              <Upload
                showUploadList={false}
                beforeUpload={handleImageUpload}
                accept="image/*"
                multiple
              >
                <span
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    cursor: 'pointer',
                    color: selectedFiles.length < 9 ? '#666' : '#aaa',
                    fontSize: 20,
                  }}
                >
                  <PictureOutlined />
                </span>
              </Upload>
            </Tooltip>

           

            {/* 起床时间按钮 */}
            <Tooltip title="起床时间">
              <div style={{ position: 'relative' }} ref={timePickerRef}>
                <span
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    cursor: 'pointer',
                    color: showTimePicker ? '#1677FF' : '#666',
                    fontSize: 20,
                  }}
                  onClick={() => setShowTimePicker(v => !v)}
                >
                  ⏰
                </span>
                
                {showTimePicker && (
                  <div style={{
                    position: 'absolute',
                    top: '100%',
                    left: 0,
                    zIndex: 100,
                    marginTop: 8,
                    background: '#fff',
                    border: '1px solid #e5e6eb',
                    borderRadius: 8,
                    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
                    padding: '8px',
                    minWidth: 200,
                  }}>
                    <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 8 }}>选择起床时间</div>
                    <DatePicker
                      showTime={{ format: 'HH:mm' }}
                      format="HH:mm"
                      placeholder="选择时间"
                      onChange={(date) => {
                        setSelectedEarlyTime(date);
                        form.setFieldsValue({ earlyTime: date });
                        setShowTimePicker(false);
                      }}
                      style={{ width: '100%' }}
                    />
                  </div>
                )}
              </div>
            </Tooltip>

            {/* 晚休时间按钮 */}
            <Tooltip title="晚休时间">
              <div style={{ position: 'relative' }} ref={eveningTimePickerRef}>
                <span
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    cursor: 'pointer',
                    color: showEveningTimePicker ? '#1677FF' : '#666',
                    fontSize: 20,
                  }}
                  onClick={() => setShowEveningTimePicker(v => !v)}
                >
                  🌙
                </span>
                
                {showEveningTimePicker && (
                  <div style={{
                    position: 'absolute',
                    top: '100%',
                    left: 0,
                    zIndex: 100,
                    marginTop: 8,
                    background: '#fff',
                    border: '1px solid #e5e6eb',
                    borderRadius: 8,
                    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
                    padding: '8px',
                    minWidth: 200,
                  }}>
                    <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 8 }}>选择晚休时间</div>
                    <DatePicker
                      showTime={{ format: 'HH:mm' }}
                      format="HH:mm"
                      placeholder="选择时间"
                      onChange={(date) => {
                        setSelectedEveningTime(date);
                        form.setFieldsValue({ eveningTime: date });
                        setShowEveningTimePicker(false);
                      }}
                      style={{ width: '100%' }}
                    />
                  </div>
                )}
              </div>
            </Tooltip>

            {/* 工作状态按钮 */}
            <Tooltip title="工作状态">
              <div style={{ position: 'relative' }} ref={workSelectorRef}>
                <span
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    cursor: 'pointer',
                    color: showWorkSelector ? '#1677FF' : '#666',
                    fontSize: 20,
                  }}
                  onClick={() => setShowWorkSelector(v => !v)}
                >
                  💼
                </span>
                
                {showWorkSelector && (
                  <div style={{
                    position: 'absolute',
                    top: '100%',
                    left: 0,
                    zIndex: 100,
                    marginTop: 8,
                    background: '#fff',
                    border: '1px solid #e5e6eb',
                    borderRadius: 8,
                    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
                    padding: '8px',
                    minWidth: 200,
                  }}>
                    <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 8 }}>选择工作状态</div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                      {isWorkOptions.map(opt => (
                        <Tag 
                          key={opt.value}
                          color="green" 
                          style={{ cursor: 'pointer', padding: '4px 8px' }}
                          onClick={() => {
                            setSelectedIsWork(opt.value);
                            form.setFieldsValue({ isWork: opt.value });
                            setShowWorkSelector(false);
                          }}
                        >
                          #{opt.label}
                        </Tag>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </Tooltip>

            {/* 心情状态按钮 */}
            <Tooltip title="心情状态">
              <div style={{ position: 'relative' }} ref={moodSelectorRef}>
                <span
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    cursor: 'pointer',
                    color: showMoodSelector ? '#1677FF' : '#666',
                    fontSize: 20,
                  }}
                  onClick={() => setShowMoodSelector(v => !v)}
                >
                  😊
                </span>
                
                {showMoodSelector && (
                  <div style={{
                    position: 'absolute',
                    top: '100%',
                    left: 0,
                    zIndex: 100,
                    marginTop: 8,
                    background: '#fff',
                    border: '1px solid #e5e6eb',
                    borderRadius: 8,
                    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
                    padding: '8px',
                    minWidth: 200,
                    maxHeight: 300,
                    overflowY: 'auto',
                  }}>
                    <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 8 }}>选择心情状态</div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                      {moodStateOptions.map(opt => (
                        <Tag 
                          key={opt.value}
                          color="orange" 
                          style={{ cursor: 'pointer', padding: '4px 8px' }}
                          onClick={() => {
                            setSelectedMoodState(opt.value);
                            form.setFieldsValue({ moodState: opt.value });
                            setShowMoodSelector(false);
                          }}
                        >
                          #{opt.label}
                        </Tag>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </Tooltip>

            {/* 表情选择器 */}
            {showEmoji && (
              <div
                ref={emojiPickerRef}
                style={{
                  position: 'absolute',
                  top: '100%',
                  left: 0,
                  zIndex: 100,
                  marginTop: 4,
                }}
              >
                <Picker
                  data={data}
                  locale="zh"
                  i18n={zh}
                  onEmojiSelect={handleEmojiSelect}
                  theme="light"
                  previewPosition="none"
                  skinTonePosition="none"
                />
              </div>
            )}
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            {/* 公开按钮 */}
            <Form.Item
              name="isPublic"
              valuePropName="checked"
              noStyle
            >
              <Switch checkedChildren="公开" unCheckedChildren="仅自己" />
            </Form.Item>

            {/* 发布按钮 */}
            <Button
              type="primary"
              htmlType="submit"
              loading={loading}
              style={{
                width: 90,
                height: 32,
                backgroundColor: content.trim() ? '#1677FF' : '#A0CFFF',
                color: '#fff',
                border: 'none',
                transition: 'background-color 0.2s',
                borderRadius: 16,
              }}
            >
              {loading ? <Spin indicator={<LoadingOutlined spin />} /> : "发布"}
            </Button>
          </div>
        </div>
      </Form>
    </Card>
  );
}